import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Header from "@/components/Header";
import { LazyMotion, m, domAnimation, AnimatePresence } from "framer-motion";
import { usePathname } from "next/navigation";
import useRem from "@/hooks/useRem";

export default function App({ Component, pageProps }: AppProps) {
  const pathname = usePathname();

  // useRem();
  return (
    <div className="relative w-screen h-screen overflow-hidden">
      <Header />
      <LazyMotion features={domAnimation}>
        <AnimatePresence mode="wait">
          <m.div
            key={pathname}
            className="absolute w-full h-full"
            initial={{
              opacity: 0,
              top: "0",
            }}
            animate={{
              opacity: 1,
              top: "0",
            }}
            exit={{
              opacity: 0,
              top: "-100vh",
            }}
            transition={{
              duration: 0.7,
            }}
          >
            <Component {...pageProps} />
          </m.div>
        </AnimatePresence>
      </LazyMotion>
    </div>
  );
}
